<template>
  <div class="process-wrapper">
    <div class="left-wrapper">
      <el-tabs v-model="activeTabName"  class="full-height">
        <el-tab-pane label="表单信息" name="formInfo">
          <div style="width: 90%; margin: auto;">
            <process-form :view-type="viewType" :biz-key="bizKey" :model-key="modelKey" :proc-inst-id="procInstId" ref="processFormRef" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="flowInfo">
          <BpmnViewer v-if="activeTabName === 'flowInfo'" :model-key="modelKey" :proc-inst-id="procInstId"/>
        </el-tab-pane>
        <el-tab-pane v-if="!!procInstId" label="审批记录" name="approveInfo">
          <ApproveHistory :proc-inst-id="procInstId"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="right-wrapper" v-if="action === 'todo' && !!procInstId">
      <approve-actions :proc-inst-id="procInstId" :task-id="taskId" @approve-success="handleApproveSuccess"/>
    </div>
  </div>
</template>

<script setup name="ProcessWrapper">
import BpmnViewer from "@/views/flowable/components/BpmnViewer.vue";
import ApproveHistory from "@/views/flowable/components/ApproveHistory.vue";
import ProcessForm from "@/views/process/components/ProcessForm.vue";
import ApproveActions from "@/views/process/components/ApproveActions.vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["approveSuccess"]);

const props = defineProps({
  modelKey: undefined,
  procInstId: undefined,
  taskId: undefined,
  bizKey: undefined,
  viewType: undefined, // read
  action: undefined,  // todo
})

const activeTabName = ref("formInfo");
// 遮罩层
const loading = ref(true);

function handleApproveSuccess(){
  emit('approveSuccess');
}

async function getFormData(){
  try {
    await proxy.$refs.processFormRef.formValid();
    return proxy.$refs.processFormRef.getFormData();
  } catch (e) {
    activeTabName.value = 'formInfo';
    throw e;
  }
}

async function resetForm(){
  try {
    return proxy.$refs.processFormRef.resetForm();
  } catch (e) {
    throw e;
  }
}

defineExpose({
  getFormData,
  resetForm
})
</script>

<style lang="scss">
.process-wrapper{
  display: flex;
  flex-direction: row;
  height: 100%;
  .left-wrapper{
    flex-grow: 1;
    padding-right: 20px;
  }
  .right-wrapper{
    border-left: 2px solid var(--el-border-color-light);
    padding: 20px;
    width: 400px;
  }
}
.full-height {
  height: 100%; /* 设置tabs高度为父容器的100% */
  display: flex;
  flex-direction: column;
  /* 可能还需要调整el-tab-pane的样式以适应父容器的高度 */
  .el-tabs__content {
    overflow-y: auto; /* 内容超出时显示滚动条 */
    flex: 1; /* 让所有tab panel平均分配高度 */
    display: flex;
    .el-tab-pane{
      flex: 1;
    }
  }
}
</style>
